<template>
	<view>
		<!-- 时间选择器弹窗 -->
		<u-datetime-picker v-if="selectorType=='date'" :mode="modeTime" :title="title" v-model="dateTimeNow" ref="timeSelector" :formatter="formatterType" :show="dateSelectorShow" @cancel="dateSelectorShow=false" @confirm="DateConfirm"></u-datetime-picker>
		<!-- 单列选择器弹窗 -->
		<u-picker v-else ref="uPicker" :defaultIndex="defaultIndex" @change="changeHandler" :title="title" @confirm="pickerConfirm" @cancel="pickerSelectorShow=false" :show="pickerSelectorShow" :columns="pickerColumns"></u-picker>
	</view>
</template>

<script>
	export default {
		name:"picker-time",
		props:{
			selectorType:{//选择器类型，区分是那种选择器
				type:String,
				default:'picker'
			},
			title:{//选择器标题
				type:String,
				default:'',
			},
			formatterType:{//时间渲染的格式类型
				type:Function,
			},
			pickerColumns:{//设置列的数据
				// type:Array,
				default(){
					return []
				}
			},
			PickerColumnData:{
				type:Array,
				default(){
					return []
				}
			},
			defaultIndex:{
				type:Array,
				default(){
					return []
				}
			},
			modeTime:{
				type:String,
				default:'datetime'
			}
		},
		data() {
			return {
				dateSelectorShow:false,//时间选择器是否显示
				dateTimeNow:new Date(),//开始时记录当前时间
				pickerSelectorShow:false,//单列选择器是否显示
			};
		},
		computed:{
			
		},
		onReady() {
			// 微信小程序需要用此写法--自定义格式化规则。
			if(this.selectorType!='picker'){
				this.$refs.timeSelector.setFormatter(this.formatterType)//时间格式化
			}
		},
		methods:{
			DateConfirm(time){//时间确定按钮事件
			    this.dateTimeNow=time.value
				let timeDate=''
				if(time.mode=='datetime'){//年月日 时分秒
				    let Seconds = new Date().getSeconds()
					timeDate=uni.$u.timeFormat(time.value,"yyyy-mm-dd hh:MM")+":"+Seconds
				}else if(time.mode=='date'){//年月日
					timeDate=uni.$u.timeFormat(time.value,"yyyy-mm-dd")
				}
				this.$emit('DateChange',timeDate)
				this.dateSelectorShow=false
			},
			pickerConfirm(value){//单列选择器确定按钮事件
				let newValue={
					value:value.indexs[0],
					type:'单列'
				}
				if(this.PickerColumnData.length>0){
					newValue.value=`${value.value[0]} ~ ${value.value[1]}`
					newValue.type='多列'
				}
				this.$emit("pickerChange",newValue)
				this.pickerSelectorShow=false
			},
			changeHandler(e){//当选择值变化时触发  picker
				// if(this.PickerColumnData.length==0){
				// 	return
				// }
				// const {
    //                 columnIndex,
    //                 index,
				// 	// 微信小程序无法将picker实例传出来，只能通过ref操作
				// 	picker = this.$refs.uPicker
    //             } = e
				// console.log(columnIndex,index,picker)
			}
		},
	}
</script>

<style lang="scss">

</style>